<!--  -->
<template>
  <el-card shadow='never'>
    <div v-for="(filterItem,index) in dataSource"
         :key="`${index}-filter`">
      <div class="filter-item"
           style="margin-top: 10px;height: 50px">
        <div class="filter-item-action-btn-group">
          <el-button type="danger"
                     icon="el-icon-delete"
                     circle
                     plain
                     size="mini"
                     :disabled="index === 0 && dataForm[scriptItem.text].length <= 1"
                     @click="deleteRow(index,'addData','')"></el-button>
          <el-popover placement="bottom"
                      width="180"
                      trigger="click">
            <el-button type="primary"
                       icon="el-icon-plus"
                       slot="reference"
                       circle
                       plain
                       size="mini"></el-button>
            <el-button-group style="border:1px solid #EEE;background-color: #fff">
              <el-button type="text"
                         size="mini"
                         style="border:none; width: 150px;border-bottom: 1px solid #EEE"
                         @click="addRow(index,'grp','')">{{$t('Add Group')}}
              </el-button>
              <el-button type="text"
                         size="mini"
                         style="border:none; width: 150px;"
                         @click="addRow(index,'row','')">{{$t('attribute.add')}}
                {{$t('attribute.condition')}}
              </el-button>
            </el-button-group>
          </el-popover>
        </div>
        <div class="filter-item-content">
          <el-form inline
                   class="filter-item-content-form">
            <el-form-item :label="scriptItem.keyLabel"
                          :label-width="`${scriptItem.keyLabelWidth}px`">
              <!-- <el-select v-model="item[scriptItem.keyFields]"
                         filterable
                         clearable
                         default-first-option
                         :placeholder="scriptItem.keyHint"
                         :style="{ width: `${scriptItem.keyFieldsWidth}px` }">
                <el-option v-for="(o,ii) in keyList"
                           :key="ii"
                           :value="o[scriptItem.fieldValue]"
                           :label="o[scriptItem.fieldLabel]"></el-option>
              </el-select> -->
              <el-input v-model="filterItem[scriptItem.keyFields]"
                        :placeholder="scriptItem.keyHint"
                        :style="{ width: `${scriptItem.keyFieldsWidth}px` }"></el-input>
            </el-form-item>
            <el-form-item :label="scriptItem.optionLabel"
                          :label-width="`${scriptItem.optionLabelWidth}px`">
              <el-select v-model="filterItem[scriptItem.optionFields]"
                         filterable
                         clearable
                         default-first-option
                         :placeholder="scriptItem.optionHint"
                         :style="{ width: `${scriptItem.optionFieldsWidth}px` }">
                <el-option v-for="(o,ii) in scriptItem.optionList"
                           :key="ii"
                           :value="o.value"
                           :label="o.label"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="scriptItem.valueLabel"
                          :label-width="`${scriptItem.valueLabelWidth}px`">
              <el-input v-model="filterItem[scriptItem.valueFields]"
                        :placeholder="scriptItem.valueHint"
                        :style="{ width: `${scriptItem.valueFieldsWidth}px` }"></el-input>
            </el-form-item>
            <el-form-item :label="scriptItem.valueTypeLabel"
                          :label-width="`${scriptItem.valueTypeLabelWidth}px`">
              <el-input v-model="filterItem[scriptItem.valueTypeFields]"
                        :placeholder="scriptItem.valueTypeHint"
                        :style="{ width: `${scriptItem.valueTypeFieldsWidth}px` }"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="filter-item-relation-btn-group">
          <el-button-group>
            <el-button size="mini"
                       :type="filterItem.relation === 'and' ? 'primary' : 'default'"
                       @click="changeAndOr(index,'and')">{{$t('attribute.and')}}
            </el-button>
            <el-button size="mini"
                       :type="filterItem.relation === 'or' ? 'primary' : 'default'"
                       @click="changeAndOr(index,'or')">{{$t('attribute.or')}}
            </el-button>
          </el-button-group>
        </div>
      </div>
      <template slot-scope="scope"
                v-if="filterItem[scriptItem.children]">
        {{ scope.children }}
      </template>
      <!--*************************************************************************-->
      <div class="filter-item"
           v-if="filterItem[scriptItem.children]"
           style="margin-left: 10px;height: 50px;"
           v-for="(grpRow,indexs) in filterItem[scriptItem.children]"
           :key="`${indexs}-grp`">
        <div class="filter-item-action-btn-group">
          <el-button type="danger"
                     icon="el-icon-delete"
                     circle
                     plain
                     size="mini"
                     :disabled="indexs === 0 && dataForm[scriptItem.text].length <= 1"
                     @click="deleteRow(indexs,'grpData',index)"></el-button>
          <el-popover placement="bottom"
                      width="180"
                      trigger="click">
            <el-button type="primary"
                       icon="el-icon-plus"
                       slot="reference"
                       circle
                       plain
                       size="mini"
                       @click="showBtn(indexs,'grpData',index)"></el-button>
            <el-button-group style="border:1px solid #EEE;background-color: #fff">
              <el-button size="mini"
                         type="text"
                         style="width: 150px;"
                         @click="addRow(indexs,'child',index)">{{$t('attribute.add')}}
                {{$t('attribute.condition')}}
              </el-button>
            </el-button-group>
          </el-popover>
        </div>
        <p class="filter-item-content">
          <el-form inline
                   class="filter-item-content-form">
            <el-form-item :label="scriptItem.keyLabel"
                          :label-width="`${scriptItem.keyLabelWidth}px`">
              <!-- <el-select v-model="item[scriptItem.keyFields]"
                         filterable
                         clearable
                         default-first-option
                         :placeholder="scriptItem.keyHint"
                         :style="{ width: `${scriptItem.keyFieldsWidth}px` }">
                <el-option v-for="(o,ii) in keyList"
                           :key="ii"
                           :value="o[scriptItem.fieldValue]"
                           :label="o[scriptItem.fieldLabel]"></el-option>
              </el-select> -->
              <el-input v-model="grpRow[scriptItem.keyFields]"
                        :placeholder="scriptItem.keyHint"
                        :style="{ width: `${scriptItem.keyFieldsWidth-10}px` }"></el-input>
            </el-form-item>
            <el-form-item :label="scriptItem.optionLabel"
                          :label-width="`${scriptItem.optionLabelWidth}px`">
              <el-select v-model="grpRow[scriptItem.optionFields]"
                         filterable
                         clearable
                         default-first-option
                         :placeholder="scriptItem.optionHint"
                         :style="{ width: `${scriptItem.optionFieldsWidth}px` }">
                <el-option v-for="(o,ii) in scriptItem.optionList"
                           :key="ii"
                           :value="o.value"
                           :label="o.label"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item :label="scriptItem.valueLabel"
                          :label-width="`${scriptItem.valueLabelWidth}px`">
              <el-input v-model="grpRow[scriptItem.valueFields]"
                        :placeholder="scriptItem.valueHint"
                        :style="{ width: `${scriptItem.valueFieldsWidth}px` }"></el-input>
            </el-form-item>
            <el-form-item :label="scriptItem.valueTypeLabel"
                          :label-width="`${scriptItem.valueTypeLabelWidth}px`">
              <el-input v-model="grpRow[scriptItem.valueTypeFields]"
                        :placeholder="scriptItem.valueTypeHint"
                        :style="{ width: `${scriptItem.valueTypeFieldsWidth}px` }"></el-input>
            </el-form-item>
          </el-form>
        </p>
        <div class="filter-item-relation-btn-group">
          <el-button-group>
            <el-button size="mini"
                       :type="grpRow.relation === 'and' ? 'primary' : 'default'"
                       @click="changeAndOr(indexs,'and')">{{$t('attribute.and')}}
            </el-button>
            <el-button size="mini"
                       :type="grpRow.relation === 'or' ? 'primary' : 'default'"
                       @click="changeAndOr(indexs,'or')">{{$t('attribute.or')}}
            </el-button>
          </el-button-group>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script>
import mixinTypeViewModule from '@/mixins/script-type-view-module'

export default {
  mixins: [mixinTypeViewModule],
  data () {
    return {
      btnCrect: null,
      keyList: [],
      grpindex: 0,
      defaultFormSetting: {
        type: 'filters',
        label: 'Filters',

        keyLabel: 'Key',
        keyLabelWidth: 40,
        keyFields: 'key',
        keyFieldsWidth: 180,
        keyHint: '',

        optionLabel: 'If',
        optionLabelWidth: 40,
        optionFields: 'opt',
        optionFieldsWidth: 100,
        optionHint: '',

        valueLabel: 'Value',
        valueLabelWidth: 40,
        valueFields: 'value',
        valueFieldsWidth: 180,
        valueHint: ''
      },
      templateParamsValue: {
        key: '',
        value: '',
        opt: '',
        relation: 'and',
        type: 'text'
      }
    }
  },
  computed: {
    dataSource () {
      return this.dataForm[this.scriptItem['text']]
    }
  },
  methods: {
    changeAndOr (index, relation) {
      this.$set(this.dataForm[this.scriptItem.text], index, { ...this.dataForm[this.scriptItem.text][index], relation })
    },
    addRow (thisIndex, type, prentIndex) {
      if (type === 'row') {
        let row = this._.cloneDeep(this.scriptItem.defaultValue[0])
        this.dataForm[this.scriptItem.text].splice(thisIndex + 1, 0, { ...row })
      } else {
        let grp = this._.cloneDeep(this.scriptItem.defaultValue[0])
        if (type === 'child') {
          if (!this.dataForm[this.scriptItem.text][prentIndex][this.scriptItem.children]) {
            this.$set(this.dataForm[this.scriptItem.text][prentIndex], this.scriptItem.children, [{ ...grp }])
          } else {
            this.dataForm[this.scriptItem.text][prentIndex][this.scriptItem.children].splice(thisIndex + 1, 0, { ...grp })
          }
        } else {
          if (!this.dataForm[this.scriptItem.text][thisIndex][this.scriptItem.children]) {
            this.$set(this.dataForm[this.scriptItem.text][thisIndex], this.scriptItem.children, [{ ...grp }])
          } else {
            const currentObj = this.dataForm[this.scriptItem.text][thisIndex][this.scriptItem.children]
            currentObj.splice(currentObj.length, 0, { ...grp })
          }
        }
      }
      this.$forceUpdate()
    },
    deleteRow (thisIndex, type, prentIndex) {
      if (this.dataForm[this.scriptItem.text].length >= 1) {
        if (type === 'addData') {
          this.dataForm[this.scriptItem.text].splice(thisIndex, 1)
        } else {
          this.dataForm[this.scriptItem.text][prentIndex][this.scriptItem.children].splice(thisIndex, 1)
        }
      }
    },
    checkValue (element) {
      for (let index = 0; index < element.length; index++) {
        const values = Object.values(element[index])
        for (let objValue = 0; objValue < values.length; objValue++) {
          if (typeof values[objValue] === 'object') {
            this.checkValue(values[objValue])
          }
          if (values[objValue] === '') {
            this.$message.error(Object.keys(this.dataSource[0])[objValue] + ' Is required.')
            return false
          }
        }
      }
      return true
    },
    checkRules () {
      if (!this.checkValue(this.dataForm[this.scriptItem.text])) {
        return false
      } else {
        return true
      }
    }
  }
}
</script>

<style scoped lang='scss'>
.filter-item {
  display: flex;
  align-items: center;
  justify-content: space-between;

  &-action-btn-group {
    width: 70px;
    height: 42px;
    vertical-align: baseline;
  }

  &-content {
    width: calc(100% - 180px);
    display: flex;
    align-items: center;

    &-form {
      display: flex;
      align-items: center;
      justify-content: space-evenly;

      .el-form-item .el-form-item {
        display: flex;
        align-items: center;
      }
    }
  }

  &-relation-btn-group {
    width: 110px;
    height: 42px;

    .el-button-group {
      vertical-align: baseline;
    }
  }
}
</style>
